<div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table class="layui-hide" id="roleTable" lay-filter="roleTable"></table>
        </div>
    </div>
</div>

<script type="text/html" id="roleTableTool">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-sm" data-open="/app/admin/role/add"
           data-title="添加" permission="app.admin.role.add">
            <i class="layui-icon layui-icon-add-1"></i>添加
        </a>
    </div>
</script>

<script type="text/html" id="roleStatusTpl">
    {{#  if(d.status =='1'){ }}
    <span class="layui-badge layui-bg-green"> 已启用 </span>
    {{#  } else { }}
    <span class="layui-badge layui-bg-danger"> 已禁用 </span>
    {{#  } }}
</script>

<script type="text/html" id="roleOptionTpl">
    {{# if(d.id!==1&&d.pid&&!d.isRoot){ }}
    <a class="layui-btn layui-btn-xs layui-btn-success" data-open="/app/admin/role/edit?id={{d.id}}"
       data-title="编辑" permission="app.admin.role.edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" permission="app.admin.role.delete"
       data-confirm="/app/admin/role/delete"
       data-data="id={{d.id}}" data-title="确定要删除吗？" data-reload="1" data-table-id="roleTable" data-table-type="2">删除</a>
    {{# } }}
</script>
<script>
  layui.use(['table'], function () {
    var $ = layui.jquery;
    var treeTable = layui.treeTable;

    let apiResults = {};
    apiResults["type"] = ["目录", "菜单", "权限"];

    // 渲染
    var tableInit = treeTable.render({
      elem: '#roleTable',
      url: '/app/admin/role/select?limit=5000&format=table_tree',
      toolbar: '#roleTableTool',
      defaultToolbar: [{
        title: "刷新",
        layEvent: "refresh",
        icon: "layui-icon-refresh",
      }, "filter", "print"],
      parseData: function (res) {
        return {
          "code": 0,
          "msg": res.msg,
          "count": 500,
          "data": res.data
        };
      },
      tree: {
        view: {expandAllDefault: true, showIcon: false}
      },
      cols: [[
        {type: 'checkbox', fixed: 'left'},
        {field: 'id', title: 'ID', width: 80, align: "center"},
        {field: 'name', title: '角色名', minWidth: 120},
        {field: 'status', title: '状态', width: 100, templet: '#roleStatusTpl', align: 'center'},
        {field: 'update_time', title: '修改时间', width: 170},
        {fixed: "right", title: "操作", width: 190, align: "center", toolbar: "#roleOptionTpl"}
      ]],
      page: false
    });

    // 表头工具栏工具事件
    treeTable.on("toolbar(" + tableInit.config.id + ")", function (obj) {
      //刷新
      if (obj.event === "refresh") {
        refreshTable(tableInit.config.id, 2);
      }
    });


  });
</script>
